<template>
    <div class="">
        <header2></header2>
        <img :src="article.logo.fullUrl" v-if="article.logo" class="max-width header_img"/>

        <div class="title max-width" v-html="article.title" v-if="article.title"></div>

        <div class="body max-width" v-html="article.body" v-if="article.body"></div>

        <vfooter></vfooter>
    </div>
</template>

<script type="text/ecmascript-6">
    import header2 from '../common/Header.vue';
    import vfooter from '../common/Footer';


    export default {
        components: {
            header2,
            vfooter
        },
        data: function () {
            return {
                article: {logo: {}}
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                var paths = this.$route.path.split("/").filter(it => it);
                var path0 = paths[0].toLowerCase();
                var param = {};

                if (paths.length == 1 && ["about", "faq", "custom"].includes(path0)) {
                    param.module = path0.slice(0, 1).toUpperCase() + path0.slice(1);
                } else {
                    var id = this.$route.params.id;
                    if (id) {
                        param.id = id
                    }
                }

                this.$http.post("/shop/article/get", param).then(res => {
                    this.article = res.data.data;
                })
            }
        }
    }
</script>

<style>
    .title {
        display: block;
        font-size: 5rem;
        margin: 30px auto 30px;
        text-align: center;
    }

    .body {
        display: block;
        font-size: 2.2rem;
        line-height: 2.5rem;
        margin: auto;
    }

    .header_img{
        margin:20px auto;
        display: block;
        width:100%;
    }

    .body img{
        max-width:100rem;
    }
</style>
